<template>
  <v-card title="快捷过滤">
    <div class="mb-30">
      <v-alert type="info" class="mb-10">
        <div slot="message">
          <div>开启<span class="blue-text">filterFormData.headerShortcutFilter</span>可以实现表头双击过滤功能</div>
          <div class="red-text">注意一定设置 highlight-current-row 参数为true, 最好在onPageLoad事件中调用setCurrentRow方法设置当前行</div>
        </div>
      </v-alert>
      <vcu-table
        ref="xTable"
        hasToolbar
        customModalShow
        filterModalShow
        :loadOptions="options"
        :height="350"
        highlight-current-row
        :filterFormData="filterFormData"
        @header-cell-dblclick="headerCellDblclick"
        @onPageLoad="onPageLoad"
      >
      </vcu-table>
    </div>

    <div class="mb-30">
      <v-alert type="info" class="mb-10">
        <div slot="message">
          <div><span class="blue-text">filterFormData.headerShortcutFilterMethod</span>参数可以自定义title，value数据</div>
        </div>
      </v-alert>
      <vcu-table ref="xTable1" :loadOptions="options" :height="350" highlight-current-row :filterFormData="filterFormData1" @onPageLoad="onPageLoad1">
      </vcu-table>
    </div>
  </v-card>
</template>
<script>
export default {
  data() {
    return {
      filterFormData: {
        headerShortcutFilter: true,
        filterFindUrl: "getInHospPatientList4cy",
        operationUrl: "dataq/api/dict/operation", //正式环境不需要
        relationUrl: "dataq/api/dict/relation", //正式环境不需要
        filterFindFormData: {
          deptNo: "14",
        },
      },

      filterFormData1: {
        headerShortcutFilter: true,
        filterFindUrl: "getInHospPatientList4cy",
        operationUrl: "dataq/api/dict/operation", //正式环境不需要
        relationUrl: "dataq/api/dict/relation", //正式环境不需要
        filterFindFormData: {
          deptNo: "14",
        },
        headerShortcutFilterMethod: (options) => {
          return {
            title: options.column.title + "---自定义",
            value: options.row[options.column.key] + "---自定义",
          };
        },
      },

      options: {
        headUrl: "dataq/api/header/getInHospPatientList",
        pageUrl: "dataq/api/page/getInHospPatientList",
        seq: true,
        radio: true,
        checkbox: true,
        filters: true,
      },
    };
  },
  mounted() {},
  methods: {
    onPageLoad({ datas }) {
      if (datas.length) {
        this.$refs.xTable.setCurrentRow(datas[0]);
      }
    },
    onPageLoad1({ datas }) {
      if (datas.length) {
        this.$refs.xTable1.setCurrentRow(datas[0]);
      }
    },

    headerCellDblclick(res) {
      console.info(333, res);
    },
  },
};
</script>
